<template>
  <div class="hqy_banner">
    <swiper
      :slides-per-view="3"
      :space-between="50"
      :options="swiperOptions"
    >
      <swiper-slide>
        <div class="swiper-slide one-banner " id="swiper1" ref="banner1">
          <img
            src="../../assets/images/index/banner_text.png"
            alt=""
            class="bannerImg bannerImg1"
            :class="realIndex == 0 ? 'imgMove' : ''"
          />
          <p>20年办学经验、服务累计超280万中小学生</p>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div
          class="swiper-slide two-banner "
          id="swiper2"
          ref="banner2"
          @click="goAi"
        >
          <div class="b_img">
            <img
              src="../../../public/images/index/text_ai.png"
              alt=""
              class="bannerImg bannerImg2 one_img"
              :class="realIndex == 0 ? 'imgMove' : ''"
            />
          </div>
          </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    let that = this;
    return {
      realIndex: null,
      swiperOptions: {
        loop: true,
        autoplay:  {
          disableOnInteraction: false,
          delay:2000,
        },
        // stopOnLastSlide: false,
　　　　 /* 触摸滑动后是否继续轮播 */
// 　　　　 disableOnInteraction: false,
        pagination: {
          el: ".swiper-pagination"
        },
        on: {
          slideChangeTransitionStart: function() {
            // 根据activeIndex来更改效果
            that.setSwiperClassName(this.realIndex);
          }
        }
      }
    };
  },
  components: {},
  created() {},
  mounted() {},
  methods: {
    setSwiperClassName($realIndex) {
      let bannerImgs = document.getElementsByClassName("bannerImg");
      bannerImgs.forEach($item => {
        if ($item.className.indexOf("bannerImg" + ($realIndex + 1)) != -1) {
          $item.className = $item.className + " imgMove";
          console.log($item.className);
        } else {
          $item.className = $item.className.replace("imgMove");
        }
      });
    },
    goAi() {
      this.$router.push({
        name: 'ai'
      })
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
